/* Wrapper Structure */
.np-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5em;
    border: 1px solid var(--block-border-color);
    border-radius: 8px;
    padding: 4px;
    background: var(--panel-background-fill);
}

/* Control Bar */
.np-wrap .np-bar {
    width: 100%;
    display: flex;
    justify-content: center; /* Center the button for aesthetics */
    padding: 2px 0;
    cursor: pointer;
}

/* The Button Styling */
.np-toggle {
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    padding: 4px;
    background: transparent;
    color: var(--body-text-color-subdued);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.np-toggle:hover {
    color: var(--body-text-color);
    background: var(--button-secondary-background-fill);
}

/* --- THE GOD-TIER FIX --- */
/* When collapsed, targeting the direct child div (the prompt box) */
.np-wrap.collapsed > div[id$="_neg_prompt"] {
    display: none !important;
}

/* Remove border/padding from wrapper when collapsed to make it slim */
.np-wrap.collapsed {
    border: 1px dashed var(--border-color-primary);
    background: transparent;
    padding: 0;
}

/* --- SETTINGS TOGGLE (God-Mode) --- */

/* The Wrapper */
.settings-wrap {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--block-border-color);
    border-radius: 8px;
    background: var(--panel-background-fill);
}

/* The Bar containing the button */
.settings-bar {
    width: 100%;
    padding: 2px;
    background: var(--section-header-text-color-subdued); 
    border-bottom: 1px solid transparent;
}

/* The Button itself */
.settings-toggle {
    width: 100%;
    font-size: 13px;
    font-weight: bold;
    color: var(--body-text-color);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    text-align: center;
    letter-spacing: 0.5px;
}

.settings-toggle:hover {
    background: var(--button-secondary-background-fill);
    color: var(--button-primary-text-color);
}

/* --- THE HIDING LOGIC --- */
/* When wrapper has 'collapsed' class, the Settings Div inside vanishes */
.settings-wrap.collapsed > div[id$="_settings"] {
    display: none !important;
}

/* Visual tweak for collapsed state */
.settings-wrap.collapsed {
    border-style: dashed;
    background: transparent;
}

/* ==========================================================================
   STUDIO QUICKSETTINGS & MODEL PICKER OVERHAUL
   ========================================================================== */
.qs-wrap {
    margin-bottom: 8px !important;
    border: 1px solid var(--border-color-primary, #282828) !important;
    border-radius: 8px !important;
    background: var(--panel-background-fill, #1c1c1c) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.qs-bar {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

.qs-toggle {
    width: 100% !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--body-text-color-subdued, #888888) !important;
    background: #202020 !important;
    border: none !important;
    border-bottom: 1px solid #282828 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.qs-toggle:hover {
    color: #ffffff !important;
    background: #282828 !important;
}

.qs-wrap.collapsed .qs-toggle {
    border-bottom: none !important;
}

.qs-wrap.collapsed {
    border: 1px solid var(--border-color-primary, #282828) !important;
    border-radius: 6px !important;
    background: #1c1c1c !important;
}

/* Hiding logic for collapsed state */
.qs-wrap.collapsed > #quicksettings,
.qs-wrap.collapsed > .quicksettings,
.qs-wrap.collapsed > [id*="quicksettings"] {
    display: none !important;
}

/* Quicksettings Flex Container (when open / not collapsed) */
.qs-wrap:not(.collapsed) > #quicksettings,
#quicksettings:not(.qs-wrap.collapsed > #quicksettings) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    background: #181818 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#quicksettings > * {
    flex: 1 1 200px !important;
    min-width: 160px !important;
    margin: 0 !important;
}

#quicksettings > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* Multi-select Text Encoder / VAE container fix */
#quicksettings .gradio-dropdown,
#quicksettings div[class*="dropdown"],
#quicksettings .svelte-10z6qve,
#quicksettings #setting_sd_modules,
#quicksettings #setting_sd_modules div.wrap-inner,
#quicksettings #setting_sd_modules .secondary-wrap {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

#quicksettings #setting_sd_modules {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#quicksettings #setting_sd_modules div.wrap-inner {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    padding: 3px 26px 3px 6px !important;
    overflow: hidden !important;
}

#quicksettings label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a0a0a0 !important;
    margin-bottom: 2px !important;
}

#quicksettings input,
#quicksettings select,
#quicksettings .secondary-wrap {
    background-color: #242424 !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 12px !important;
}

/* Multi-Select Chips (VAE / Text Encoders) */
#quicksettings .token,
#quicksettings .token-remove,
#quicksettings div.token {
    background: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
    color: #e5e5e5 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin: 2px 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#quicksettings .token span:not(.token-remove),
#quicksettings div.token span:not(.token-remove) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

#quicksettings .token .token-remove,
#quicksettings div.token .token-remove {
    flex: 0 0 auto !important;
    margin-left: 4px !important;
    cursor: pointer !important;
}

#quicksettings button.tool {
    flex: 0 0 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #242424 !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
    color: #d4d4d4 !important;
    cursor: pointer !important;
    align-self: flex-end !important;
    margin-bottom: 2px !important;
}

#quicksettings button.tool:hover {
    background: #303030 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}